<template>
  <!-- 租户管理 -->
  <div class="app-container">
    <div class="mainbox">
      <dt-table
        v-loading="loading"
        :table-opts="tableOpts"
        :pagination-data="{
          total:total,
          queryParams:queryParams
        }"
        @pagination="getList"
        @searchChange="handleQuery"
        @searchReset="handleReset"
      >
        <template #operatorBtn="scope">
          <el-dropdown style="padding-left: 10px">
            <el-button v-permission="['CLIENT_MANAGE_MORE_BUTTON']" size="small">
              更多<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" style="width:73px;text-align:center">
              <el-dropdown-item @click.native="editClientInfo(scope.param)">修改</el-dropdown-item>
              <el-dropdown-item @click.native="deleteClient(scope.param)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </dt-table>
      <ClientEdit ref="clientRef" />
      <ClientDrawer ref="drawerRef" />
    </div>
  </div>
</template>
<script>
import clientManageApi from '@/framework/api/clientManage'
import ClientEdit from './components/clientEdit'
import ClientDrawer from './components/clientDrawer'

export default {
  name: 'ClientManage',
  components: {
    ClientEdit,
    ClientDrawer
  },
  dicts: ['isolationMode'],
  data() {
    return {
      loading: false,
      queryParams: {
        tenantName: '',
        isolationMode: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      tableOpts: {
        rowKey: 'id',
        toolbarBtn: [
          {
            label: '新增',
            type: 'primary',
            permission: ['CLIENT_MANAGE_ADD_BUTTON'],
            icon: 'el-icon-plus',
            click: () => {
              this.createClientInfo()
            }
          }
        ],
        firstTableCol: {
          select: false,
          width: 70
        },
        indexTableCol: {
          label: '序号',
          width: 70
        },
        tableCol: [
          {
            prop: 'tenantName',
            label: '租户(公司)名称',
            show: true,
            search: true,
            labelWidth: '108px'
          },
          {
            prop: 'contact',
            label: '联系人',
            show: true
          },
          {
            prop: 'telephone',
            label: '联系人手机',
            show: true
          },
          {
            prop: 'email',
            label: '联系人邮箱',
            show: true
          },
          {
            prop: 'address',
            label: '公司地址',
            show: true
          },
          {
            prop: 'socialCode',
            label: '统一社会信用代码',
            show: true
          },
          {
            prop: 'isolationMode',
            label: '数据隔离方式',
            labelWidth: '110px',
            width: 132,
            show: true,
            // search: true,
            type: 'dict',
            formatter: () => { return this.dict.type.isolationMode }
          },
          {
            prop: 'remark',
            label: '备注',
            show: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            show: true
          },
          {
            prop: 'statusFlag',
            label: '是否启用',
            show: true,
            type: 'switch',
            activeValue: 1,
            inactiveValue: 2,
            switchChange: (row, value) => { return this.statusChange(row) }
          }
        ],
        operator: {
          fixed: 'right',
          align: 'center',
          width: 300,
          operatorBtn: [
            {
              text: '设置租户应用',
              permission: ['CLIENT_MANAGE_SET_BUTTON'],
              click: (row, col, cellValue) => {
                return this.setAdministration(row)
              }
            },
            {
              text: '查看',
              permission: ['CLIENT_MANAGE_DETAIL_BUTTON'],
              click: (row, col, cellValue) => {
                return this.handleDetail(row)
              }
            }
          ]
        },
        tableData: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取页面列表
    getList() {
      this.loading = true
      clientManageApi.getTenantList(this.queryParams).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      })
    },
    // 搜索
    handleQuery(formModel) {
      this.queryParams = Object.assign(this.queryParams, formModel)
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.queryParams = {
        tenantName: '',
        isolationMode: '',
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    // 改变状态
    statusChange(row) {
      clientManageApi.updateTenantStatus({
        statusFlag: row.statusFlag,
        id: row.id
      }).then((res) => {
        this.$dtMessage({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      }).catch(() => {
        this.getList()
      })
    },
    createClientInfo() {
      this.$refs.clientRef.open('', 'create')
    },
    editClientInfo(row) {
      this.$refs.clientRef.open(row, 'update')
    },
    handleDetail(row) {
      this.$refs.clientRef.open(row, 'detail')
    },
    // 设置应用
    setAdministration(row) {
      this.$refs.drawerRef.openDrawer(row)
    },
    // 删除请求
    deleteClient(row) {
      this.$dtMessageBox({ title: '提示', message: `确定要删除“${row.tenantName}”吗?`, type: 'warning' }).then(() => {
        clientManageApi.deleteTenant({ id: row.id }).then((res) => {
          this.getList()
          this.$dtMessage({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    }
  }
}
</script>
